<template>
	<div id="userDetail">
		<div class="userDetail_1">
			<!--<router-link to="/agent/detail/userList">&lt;返回</router-link>-->
			<input type="button" value="<返回" @click="returnU"/>
			<span>|</span>
			<p>
				<span>活动信息</span>
				&gt;
				<span>{{getOpera(taskState)}}</span>
				&gt;
				<span>查看详情</span>
			</p>
		</div>
		<div class="userDetail_2">
			<div class="user_title">
				<p>用户昵称</p>
				<p>下单账号</p>
				<p>搜索途径</p>
				<p>申请时间</p>
				<p>连续操作天数</p>
				<p>订单号</p>
				<p>状态</p>
			</div>
			<div class="user_item">
				<p>{{userName}}</p>
				<p>{{platformName}}</p>
				<p>{{getIntoType(way)}}</p>
				<p>{{this.$parent.getDate(applyTime)}}</p>
				<p>{{dayNum}}</p>
				<p>{{orderNum}}</p>
				<!--------状态----------->
				<p>{{getOpera(taskState)}}</p>
			</div>
		</div>
		<div class="userDetail_3" v-if="taskState>=12">
			<div class="userDetail_3_item">
				<p>收藏宝贝截图：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="collectionGoodsImg"/>
				</div>
			</div>
			<div class="userDetail_3_item">
				<p>收藏店铺截图：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="followHouseImg"/>
				</div>
			</div>
		</div>
		<div class="userDetail_3" v-if="askImg || parametersImg || commentImg">
			<div class="userDetail_3_item" v-if="askImg!=null && askImg!=''">
				<p>问大家截图：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="askImg"/>
				</div>
			</div>
			<div class="userDetail_3_item" v-if="parametersStatus==1 && parametersImg!=null && parametersImg!=''">
				<p>产品参数截图：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="parametersImg"/>
				</div>
			</div>
			<div class="userDetail_3_item" v-if="browsingEvaluationStatus==1 && commentImg!=null && commentImg!=''">
				<p>宝贝评价截图：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="commentImg"/>
				</div>
			</div>
		</div>
		<div class="userDetail_3" v-if="taskState>=13">
			<div class="userDetail_3_item" v-if="compareTao1 !=null && compareTao1!=''">
				<p>货比图片一：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="compareTao1"/>
				</div>
			</div>
			<div class="userDetail_3_item" v-if="compareTao2 !=null && compareTao2!=''">
				<p>货比图片二：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="compareTao2"/>
				</div>
			</div>
			<div class="userDetail_3_item" v-if="compareTao3 !=null && compareTao3!=''">
				<p>货比图片三：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="compareTao3"/>
				</div>
			</div>
		</div>
		<div class="userDetail_3" v-if="taskState>=13 && deepStatus==1">
			<div class="userDetail_3_item" v-if="lookOthergoods1 !=null && lookOthergoods1!=''">
				<p>副宝贝图片一：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="lookOthergoods1"/>
				</div>
			</div>
			<div class="userDetail_3_item" v-if="lookOthergoods2 !=null && lookOthergoods2!=''">
				<p>副宝贝图片二：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="lookOthergoods2"/>
				</div>
			</div>
			<div class="userDetail_3_item" v-if="lookOthergoods3 !=null && lookOthergoods3!=''">
				<p>副宝贝图片三：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="lookOthergoods3"/>
				</div>
			</div>
		</div>
		<div class="userDetail_3" v-if="chatImg || comebackImg">
			<div class="userDetail_3_item" v-if="chatImg !=null && chatImg!=''">
				<p>咨询客服图片：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="chatImg"/>
				</div>
			</div>
			<div class="userDetail_3_item" v-if="returnBabyStatus==1 && comebackImg !=null && comebackImg!=''">
				<p>回访宝贝图片：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="comebackImg"/>
				</div>
			</div>
		</div>
		<div class="userDetail_3" v-if="taskState>=14">
			<div class="userDetail_3_item" v-if="againSearchStatus==1 && againSearchImg !=null && againSearchImg!=''">
				<p>重新搜索图片：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="againSearchImg"/>
				</div>
			</div>
			<div class="userDetail_3_item" v-if="orderImg !=null && orderImg!=''">
				<p>订单详情图片：</p>
				<div class="img_box">
					<img @click="tobigImg($event)" :src="orderImg"/>
				</div>
			</div>
		</div>
		<input id="wrong" v-if="taskState == 14 || taskState==15" type="button" value="订单信息出错" @click="report = true,noPassOpera"/>
		<div v-if="taskState >= 16 && noEvaluateStatus==0 && taskState !=30" class="userDetail_4">
			<p>试用报告详情</p>
			<div class="userDetail_4_item">
				<p>商品评价：</p>
				<input type="text" v-model="reportEvaluate" readonly="readonly" />
			</div>
			<div class="userDetail_4_item" >
				<p>宝贝评价截图：</p>
				<div class="img_box" v-for="item in evaluateImgList" v-show="item!=''">
					<img @click="tobigImg($event)" :src="item"/>
				</div>
			</div>
			<div class="userDetail_4_item" v-if="hasEvalImg == 1">
				<p>商品图片：</p>
				<div v-for="item in goodsImgList" class="img_box" v-show="item!=''">
					<img @click="tobigImg($event)" :src="item"/>
				</div>
			</div>
			<!--<div class="userDetail_btns">
				<input type="button" value="确认" v-if="taskState==20"/>
				<input type="button" value="报告信息出错" v-if="taskState==16 || taskState==17 || taskState==20"/>
			</div>-->
			<div class="userDetail_4_item" v-if="taskState>=20 && hasDaysEval>0  &&taskState !=30 &&taskState !=35">
				<p>追评内容：</p>
				<input type="text" v-model="reviewText" readonly="readonly" />
			</div>
			<div class="userDetail_4_item" v-if="taskState>=20 && hasDaysEval>0 && reviewShowStatus==1 &&taskState !=30 &&taskState !=35">
				<p>追评晒图：</p>
				<div v-for="item in reviewShowImgList" class="img_box" v-show="item!=''">
					<img @click="tobigImg($event)" :src="item"/>
				</div>
			</div>
		</div>
		<p class="count_down" v-if="taskState==20">将于{{getTimeN()}}自动确认</p>
		<!--<input id="add" type="button" value="确认" />-->
		<div class="userDetail_btns">
			<input type="button" value="确认" v-if="taskState==20" @click="passOpera"/>
			<input type="button" value="报告信息出错" v-if="(taskState==16 || taskState==17) || (taskState==20 && hasDaysEval==0 && noEvaluateStatus==0) " @click="report=true"/>
		</div>
		<!---------图片放大-------------->
		<div v-show="bigImg" id="bigImg">
			<div class="bigImg">
				<img :src="bigImgsrc"/>
				<img @click="bigImg = false" class="close" src="../../static/img/close.png"/>
			</div>
		</div>
		<!--------报错弹窗------------>
		<div v-show="report" id="report">
			<div class="report">
				<h3>订单信息报错</h3>
				<textarea placeholder="请输入您的报错信息" maxlength="100" v-model="reason"></textarea>
				<div class="report_btns">
					<input @click="report = false" type="button" value="取消" />
					<input @click="noPassOpera" type="button" value="确定" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'userDetail',
	data:function(){
		return{
			reason:'',//报错理由
			taskId:'',//活动Id
			scheduleId:'',//小任务Id
			userName: '艾瑞莉娅',//用户名-显示
			platformName: '我的淘宝账号',//下单账号
			way: '手淘搜索',//搜索途径
			applyTime: '2018-01-01 06:05:30',//申请时间
			dayNum: 3,//连续操作天数
			orderNum: 'yhg14548643',//订单号-显示
			taskState: 3,//订单状态-显示
			reportEvaluate: '',//商品评价
			reviewText: '',//追评内容
			collectionGoodsImg:'',//收藏宝贝图片
			followHouseImg:'',//收藏店铺图片
			orderImg:'',//订单详情图片
			evaluateImg: '',//评价截图
			evaluateImgList:[],//评价截图数组
			goodsImgList:[//买家秀图片
				'../../static/img/avatar.jpg',
				'../../static/img/avatar.jpg',
				'../../static/img/avatar.jpg',
			],
			reviewShowImgList:[//追评晒图图片
				'../../static/img/avatar.jpg',
				'../../static/img/avatar.jpg',
				'../../static/img/avatar.jpg',
			],
			bigImg:false,//图片放大显示隐藏
			bigImgsrc: '',//要放大的图片路径
			noEvaluateStatus:0,//是否无需评价，0否，1是
			hasEvalImg:0,//是否需要评价晒图  1  是   0  否
			hasDaysEval:0,//几天后追评  0 为不用 
			reviewShowStatus:0,//追评晒图 0否，1是
			reportTime:'',//提交报告时间
			commentTime:'',//提交追评时间
			report: false,//报错弹窗开关
			askImg:'',//问大家图片
			parametersStatus:0,//产品参数状态
			parametersImg:'',//产品参数图片
			browsingEvaluationStatus:0,//浏览宝贝评价  0否，1是
			commentImg:'',//查看宝贝评价截图
			compareTao1:'',//货比多家1
			compareTao2:'',//货比多家2
			compareTao3:'',//货比多家3
			chatImg:'',//聊天截图
			deepStatus:0,//深度浏览店铺副宝贝 0否，1是
			lookOthergoods1:'',//浏览店铺其他宝贝图片1
			lookOthergoods2:'',//浏览店铺其他宝贝图片2
			lookOthergoods3:'',//浏览店铺其他宝贝图片3
			returnBabyStatus:0,//回访宝贝 0否，1是
			comebackImg:'',//回访宝贝图片
			againSearchStatus:0,//重新搜索下单，0否，1是
			againSearchImg:'',//重新搜索下单图片
		}
	},
	methods:{
		tobigImg:function(obj){
			this.bigImgsrc = obj.srcElement.src;
			this.bigImg = true;
		},
		showDatail:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
	        	id:_this.scheduleId
	        })
			_this.$axios.post('/agent/schedule/selectSchedule',postData).then(function(res){
			    var data = res.data;
			    if(data.message=="succ"){
			    	 console.log(data.result);
			    	 data = data.result;
			    	 _this.taskId = data.taskId;
			    	 _this.userName = data.userName;
			    	 _this.platformName = data.accountName;
			    	 _this.way = data.intoType;
			    	 _this.applyTime = data.createtime;
			    	 _this.orderNum = data.orderNum;
			    	 _this.taskState = data.operaStatus;
			    	 
			    	 _this.collectionGoodsImg = data.collectionGoodsImg;
			    	 _this.followHouseImg = data.followHouseImg;
			    	 _this.orderImg = data.orderImg;
			    	 _this.reportEvaluate = data.reportEvaluate;
//			    	 _this.evaluateImg = data.evaluateImg;
			    	 if(data.evaluateImg !=null && data.evaluateImg!=""){
			    	 	_this.evaluateImgList = data.evaluateImg.split(';');
			    	 }
			    	 if(data.goodsImg!=null && data.goodsImg !=""){
			    	 	_this.goodsImgList = data.goodsImg.split(';');
			    	 }
			    	 _this.reviewText = data.reviewText;
			    	 if(data.reviewShowImg!=null && data.reviewShowImg!=""){
			    	 	_this.reviewShowImgList = data.reviewShowImg.split(';');
			    	 }
			    	 _this.noEvaluateStatus = data.noEvaluateStatus;
			    	 _this.hasEvalImg = data.hasEvalimg;
			    	 _this.hasDaysEval = data.hasDayseval;
			    	 _this.reviewShowStatus = data.reviewShowStatus;
			    	 _this.reportTime = data.reportTime;
			    	 _this.commentTime = data.commentTime;
			    	 
			    	 _this.askImg = data.askImg;
			    	 _this.parametersStatus = data.parametersStatus;
			    	 _this.parametersImg = data.parametersImg;
			    	 _this.browsingEvaluationStatus = data.browsingEvaluationStatus;
			    	 _this.commentImg = data.commentImg
			    	 _this.compareTao1 = data.compareTao1;
			    	 _this.compareTao2 = data.compareTao2;
			    	 _this.compareTao3 = data.compareTao3;
			    	 _this.chatImg = data.chatImg;
			    	 _this.deepStatus = data.deepStatus;
			    	 _this.lookOthergoods1 = data.lookOthergoods1;
			    	 _this.lookOthergoods2 = data.lookOthergoods2;
			    	 _this.lookOthergoods3 = data.lookOthergoods3;
			    	 _this.returnBabyStatus = data.returnBabyStatus;
			    	 _this.comebackImg = data.comebackImg;
			    	 _this.againSearchStatus = data.againSearchStatus;
			    	 _this.againSearchImg = data.againSearchImg;
			    }else{
			    	_this.$alert('2',data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		getOpera:function(obj){
			if(obj==11 || obj==12 || obj==13 || obj==18){
				return "待填订单号";
			}else if(obj==14 || obj==15){
				return "待提交报告";
			}else if(obj==16 || obj==17){
				return "待提交追评报告";
			}else if(obj==20){
				return "报告待确认";
			}else if(obj==30){
				return "待修改订单";
			}else if(obj==35){
				return "待修改报告"
			}else if(obj==10){
				return "已取消资格";
			}else if(obj==21){
				return "返款完成";
			}
		},
		getIntoType:function(obj){
			if(obj==1){
				return "关键词";
			}else if(obj==2){
				return "淘口令";
			}else if(obj==3){
				return "二维码";
			}
		},
		returnU:function(){
			this.$router.go(-1)
		},
		noPassOpera:function(){
			var _this = this;
			_this.$loading.show();
			if(_this.reason==''){
				_this.$loading.hide();
				_this.$alert('2','报错理由不能为空');
				return;
			}
			var postData = _this.$qs.stringify({
	        	id:_this.scheduleId,
	        	reason:_this.reason
	        })
			_this.$axios.post('/agent/schedule/noPassOpera',postData).then(function(res){
			    var data = res.data;
			    if(data.message=="succ"){
			    	 console.log(data.result);
			    	 _this.report = false;
			    	 _this.$loading.hide();
			    	 _this.$alert('1',data.result);
			    	 if(_this.taskState==14 || _this.taskState==15){
			    	 	_this.taskState = 30;
			    	 }else if(_this.taskState==16 || _this.taskState==17 || _this.taskState==20){
			    	 	_this.taskState = 35;
			    	 }
			    }else{
			    	_this.$loading.hide();
			    	_this.$alert('2',data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		passOpera:function(){
			var _this = this;
			_this.$loading.show();
			let postData = _this.$qs.stringify({
	        	id:_this.scheduleId
	        })
			_this.$axios.post('/agent/schedule/passOpera',postData).then(function(res){
			    var data = res.data;
			    if(data.message=="succ"){
			    	 console.log(data.result);
			    	 _this.$loading.hide();
			    	 _this.$alert('1',data.result);
			    	 _this.taskState = 21;
			    }else{
			    	_this.$loading.hide();
			    	_this.$alert('2',data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		getTimeN:function(){
			var time = "";
			if(this.hasDaysEval>0){
				time = this.commentTime + 2*24*60*60*1000;
			}else{
				time = this.reportTime + 2*24*60*60*1000;
			}
			return this.$parent.getDate(time);
		},
		
	},
	created:function(){
		//----------上个页面传过来的任务号------------
		this.scheduleId = this.$route.query.scheduleId;
		this.dayNum = this.$route.query.operaDay;
		this.showDatail();
	},
}
</script>

<style scoped>
.userDetail_1{
	display: flex;
	padding: 10px 0;
}
.userDetail_1 a{
	color: #545454;
}
.userDetail_1>span{
	margin: 0 10px;
}
.userDetail_1 p{
	color: #808080;
}
.userDetail_1>input{
	border: none;
	background-color: transparent;
	color: #545454;
}
.user_title{
	display: flex;
	background-color: #F5F5F5;
	padding: 10px 0;
}
.user_title p{
	width: 16%;
	text-align: center;
	color: #545454;
}
.user_title p:nth-child(4){
	width: 20%;
}
.user_item{
	display: flex;
	padding: 10px 0;
	border-bottom: 1px solid #E6E6E6;
}
.user_item p{
	width: 16%;
	text-align: center;
	color: #808080;
}
.user_item p:nth-child(4){
	width: 20%;
}
/*---------待提交报告------------*/
.userDetail_3{
	display: flex;
	border-bottom: 1px solid #E6E6E6;
}
.userDetail_3_item{
	display: flex;
	justify-content: center;
	width: 33%;
	border-right: 1px solid #E6E6E6;
	padding: 10px 0;
	box-sizing: border-box;
}
.userDetail_3_item:last-child{
	border-right: none;
}
.userDetail_3_item p{
	height: 30px;
	line-height: 30px;
	color: #545454;
	margin-right: 5px;
}
.userDetail_3_item .img_box{
	width: 150px;
	height: 150px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
}
.userDetail_3_item .img_box img{
	width: 100%;
	display: block;
	cursor: pointer;
}
#wrong{
	width: 120px;
	height: 30px;
	display: block;
	margin: 0 auto;
	margin-top: 30px;
	background-color: #FF464E;
	color: #FFFFFF;
	border: none;
}
/*--------试用报告详情-------------*/
.userDetail_4{
	margin-top: 30px;
}
.userDetail_4>p{
	color: #808080;
}
.userDetail_4_item{
	display: flex;
	margin-top: 15px;
	margin-left: 20px;
}
.userDetail_4_item p{
	height: 30px;
	line-height: 30px;
	color: #545454;
	width: 98px;
}
.userDetail_4_item input{
	height: 30px;
	width: 450px;
	border: 1px solid #E6E6E6;
	box-sizing: border-box;
	padding-left: 10px;
	box-sizing: border-box;
}
.userDetail_4_item .img_box{
	width: 150px;
	height: 150px;
	display: flex;
	align-items: center;
	margin-right: 15px;
	border: 1px solid #E6E6E6;
	overflow: hidden;
}
.userDetail_4_item .img_box img{
	width: 100%;
	display: block;
	cursor: pointer;
}
p.count_down{
	text-align: center;
	color: #FF464E;
	margin-top: 15px;
}
.userDetail_btns{
	display: flex;
	justify-content: center;
	margin-top: 10px;
}
.userDetail_btns input{
	width: 120px;
	height: 30px;
}
.userDetail_btns input:first-child{
	background-color: #FF464E;
	color: #FFFFFF;
	border: none;
	margin-right: 20px;
}
.userDetail_btns input:last-child{
	background-color: #FFFFFF;
	color: #FF464E;
	border: 1px solid #FF464E;
}
#add{
	width: 120px;
	height: 30px;
	border: none;
	background-color: #FF464E;
	color: #FFFFFF;
	display: block;
	margin: 0 auto;
	margin-top: 30px;
}
/*--------图片放大-----------*/
#bigImg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bigImg{
	padding: 20px;
	background-color: #fff;
	border-radius: 5px;
	position: relative;
	margin-top: -10%;
}
.bigImg img{
	height: 450px;
	display: block;
}
.bigImg img.close{
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	top: -15px;
	right: -15px;
	cursor: pointer;
}
/*-------报错弹窗-----------*/
#report{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
}
.report{
	width: 400px;
	height: 210px;
	background-color: #fff;
	border-radius: 5px;
	padding: 20px 0;
	box-sizing: border-box;
}
.report h3{
	font-size: 16px;
	color: #FF464E;
	text-align: center;
}
.report textarea{
	width: 84%;
	height: 100px;
	display: block;
	margin: 15px auto;
	border: 1px solid #E6E6E6;
	padding: 10px;
	box-sizing: border-box;
	resize: none;
}
.report_btns{
	display: flex;
	justify-content: center;
	align-items: center;
}
.report_btns input:first-child{
	width: 70px;
	height: 24px;
	background-color: #FFFFFF;
	color: #9F9F9F;
	border: 1px solid #E6E6E6;
	border-radius: 3px;
	font-size: 14px;
	margin-right: 10px;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
}
.report_btns input:last-child{
	width: 70px;
	height: 24px;
	background-color: #FF464E;
	color: #FFFFFF;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
}
</style>